<!--
  computed
 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn Vue</title>
</head>

<body>

  <div id="app">
    <h2>总价格: {{totalPrice}}</h2>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: [
          {
            id: 110,
            name: 'Unix编程技术',
            price: 119
          },
          {
            id: 111,
            name: '代码大全',
            price: 105
          },
          {
            id: 112,
            name: '深入理解计算机原理',
            price: 98
          },
          {
            id: 113,
            name: '现代操作系统',
            price: 87
          },
        ]
      },
      computed: {
        totalPrice: function () {

          let arr = this.books;
          let s = 0;

          // https://www.cnblogs.com/woshidouzia/p/9304603.html

          // 第1种  【 for 】
          for (let i=0; i<arr.length; i++) {
            let item = arr[i] || {};
            s += item.price || 0;
          }
          return s;

          // 第2种 【 for...in 】
          // for (let i in arr) {
          //   let item = arr[i] || {};
          //   s += item.price || 0;
          // }
          // return s;

          //第3种 【 for..of 】
          // for (let book of arr) {
          //   s += book.price || 0;
          // }
          // return s;

          //第4种 【 forEach 】
          // this.books.forEach((value, key) => {
          //   s+= value.price || 0;
          // });
          // return s;

          //第5种 不符合该问题，当学习 【 filter 】不会改变原始数组,返回新数组
              // console.log(arr.filter(item => item.price))

          //第6种 不符合该问题，当学习 【 every 】对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。
              // console.log( arr.every( function( item, index, array ){
              //   return item > 3;
              // }));

          //第7种 不符合该问题，当学习 【 some 】对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
              // console.log( arr.some( function( item, index, array ){
              //   return item > 3;
              // }))

          //第8种 【 reduce 】
              // 1. 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
              // let total = [0,1,2,3,4].reduce((a, b)=>a + b); //==10

              // 2. 接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组
              // [0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
              //   return previousValue + currentValue;
              // });
          // s = arr.reduce(function(previousValue, currentValue, index, array){
          //   let pre = previousValue.price || previousValue;
          //   let cur = currentValue.price || 0;
          //   return pre + cur;
          // });
          // return s;

          //第9种 【 reduceRight 】方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
              // let arr = [0,1,2,3,4];
              // arr.reduceRight(function (preValue,curValue,index,array) {
              //   return preValue + curValue;
              // }); // 10

          // s = arr.reduceRight(function (preValue,curValue,index,array) {
          //   let pre = preValue.price || preValue;
          //   let cur = curValue.price || 0;
          //   return pre + cur;
          // }); // 10
          // return s;

          //第10种 不符合该问题，当学习 【 find 】 返回数组中符合测试函数条件的第一个元素。否则返回undefined
              // ES5
              // function getStu(element){
              //   return element.name == '代码大全'
              // }
              // arr.find(getStu)
              //返回结果为{id: 111, name: '代码大全', price: 105}

              // ES6方法
              // arr.find((element) => (element.name == '代码大全'))

          // 第11中 【 findIndex 】
        }
      }
    })
  </script>
</body>

</html>